<script setup>

import {baseUrl} from "../../api/http";
import {addLikePost, deleteLikePost_1} from "../../api/neighborhood/neighborhood";
import {getUserId, set} from "../../store";
import {ref} from "vue"
import {bMessage} from "../popup/popup";
import {goPostDetail, goPostEditById} from "../../tools/go";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniTag from "../../uni_modules/uni-tag/components/uni-tag/uni-tag.vue";

const post = defineProps({
  user_avatar: {
    type: String,
    default: 'src/static/logo.png'
  },
  user_nick: {
    type: String,
    default: 'bbm'
  },
  content: {
    type: String,
    default: '无敌内容sjadhshdiashpidosaoihoi'
  },
  img: {
    type: Array,
    default: () => {
      return [{
        clientURL: 'src/static/logo.png'
      }]
    }
  },
  video:{
    type: Array,
    default: () => {
      return [{
        clientURL: ''
      }]
    }
  },
  like: {
    type: Number,
    default: 0
  },
  comments: {
    type: Number,
    default: 0
  },
  id: {
    type: Number,
    default: 0
  },
  createTime: {
    type: String,
    default: '2022-01-01 00:00:00'
  },
  type: {
    type: String,
    default: '分享生活'
  },
  file: {
    type: Array,
    default: []
  },
  likes: {
    type: Array,
    default: []
  },
  me: {
    type: Boolean,
    default: false
  },
  status: {
    type: Number,
    default: 2
  },
  message:{
    type:String,
    default: ''
  }
})


const likeNum = defineModel('likeNum')

//预览图片
const previewImage = (url) => {
  uni.previewImage({
    current: 0,
    urls: [url],
  });
};

const postEd = (id) => {
  const temp = {}
  Object.assign(temp, post)
  set('post', temp)
  goPostEditById(id)
}

const init = () => {
  if (post.likes.includes(getUserId())) {
    likeStatus.value = true
  }
}

const likeStatus = ref(false)

init()

let lastTime = 0

const likePost = () => {

  let now = Date.now()

  if (now - lastTime > 500) {
    lastTime = now
  } else {
    bMessage("请勿频繁操作", "error")
    return
  }


  if (!likeStatus.value) {
    addLikePost({
      sourceId: post.id,
      founder: getUserId(),
      status: 0
    }).then(res => {
      if (res.code === 200) {
        likeStatus.value = true
        likeNum.value++
      }
    })
  } else {
    deleteLikePost_1(
      post.id,
      getUserId()
    ).then(res => {
      if (res.code === 200) {
        likeStatus.value = false
        likeNum.value--
      }
    })
  }

}
</script>

<template>
  <view class="post_back">

    <!--帖子头部-->
    <view class="post_user">

        <view class="user">
          <v-avatar class="avatar" size="50" :image="user_avatar" />
          <view class="nick_time">
            <text class="nick">{{user_nick}}</text>
            <text class="time">{{createTime}}</text>
          </view>
        </view>

        <view >

        </view>

        <view>

        </view>

    </view>

    <!--帖子内容-->
    <view class="post_content">

      <view class="post_media">
        <view class="label">
          <text>{{type}}</text>
        </view>

        <view class="content" @click="postEd(id)">
          <text>{{content}}</text>
        </view>
      </view>

      <view class="post_media_file">
        <v-row>
          <v-col
              v-for="n in file"
              :key="n"
              cols="4"
          >
            <v-img
                aspect-ratio="1"
                cover
                v-if="n.type === 'png' || n.type === 'jpg' || n.type === 'jpeg' || n.type === 'gif' || n.type === 'bmp' || n.type === 'webp'"
                :src="baseUrl + n.clientUrl"
                @click="previewImage(baseUrl + n.clientUrl)"
            >
              <template v-slot:placeholder>
                <v-row
                    align="center"
                    class="fill-height ma-0"
                    justify="center"
                >
                  <v-progress-circular
                      color="grey-lighten-5"
                      indeterminate
                  ></v-progress-circular>
                </v-row>
              </template>
            </v-img>
            <video
                class="edit_post_video"
                v-if="n.type === 'm4v' || n.type === 'mp4'"
                :src="baseUrl + n.clientUrl"
                object-fit="cover"
            ></video>
          </v-col>
        </v-row>

      </view>
    </view>

    <view v-if="me">
      <view class="tag-view">
        <uni-tag
            :text=" status === 2
            ? '未发布': status === 1 || status === 5
            ? '已发布' : status === 3
            ? '审核中': '审核未通过'"
            :type=" status === 2
            ? 'primary': status === 1 || status === 5
            ? 'success' : status === 3
            ? 'info': 'error'"
        />
        <text class="postMessage" v-if="status === 4">原因：{{message}}</text>
      </view>
    </view>

    <!--帖子底部-->
    <view class="post_bottom" v-if="!me">

      <view class="btn" @click="likePost">
        <uni-icons
            :type="likeStatus ? 'heart-filled' : 'heart'"
            size="24"
            :color="likeStatus ? '#ff6b6b' : '#666'"
        />
        <text>{{likeNum}}</text>
      </view>

      <view class="btn" @click="goPostDetail(id)">
        <uni-icons type="chat" size="24" />
        <text>{{comments}}</text>
      </view>

    </view>

  </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main.scss";
.post_back{
  @include main.useTheme() {
    .postMessage{
      margin-left: 10rpx;
      font-size: 3vw;
    }

    .post_bottom{
      .btn{
        .icon{
          margin: 0 10px 0 10px;
          color: #9f9f9f;
        }
        .red_color {
          color: #fc2c54;
        }
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3vw;
      }
      .btn:nth-child(1) {
        .icon{
          margin: 0 10px 0 0;
        }
      }
      display: flex;
      align-items: center;
      height: 30px;
      padding: 10px 0 0 0;
      border-top: 1px solid main.getVal("primary_border_color");
    }

    .post_content{
      .post_media{
        .content{
          text{
            word-wrap: break-word;
            word-break: break-all;
          }
        }
        .label{
          text{
            min-width: 56px;
          }
          background-color: #5a8ff6;
          font-size: 3vw;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          padding: 0 10px;

          height: 2.3vh;
          border-radius: 10px 0 10px 0;
          margin-right: 5px;
        }
        display: flex;
        margin: 5px 0 5px 0;
        align-items: start;
        line-height: 1;
        padding-bottom: 12px;
      }
      padding: 15px 0;
    }


    .post_user{
      .user{
        .avatar{
          margin-right: 5px;
        }
        .nick_time{
          .nick{
            font-size: 5vw;
          }
          .time{
            font-size: 2.3vw;
            color: main.getVal("one_lv_text_color");
          }
          display: flex;
          flex-direction: column;
          line-height: 1;
        }
        display: flex;
        align-items: center;
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    padding: 10px;
    background-color: main.getVal("one_lv_bg_color");
    border-radius: 5px;
    margin: 10px 0;
  }
}


</style>